<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Contact</title>
		
		<link href="css/master.css" rel="stylesheet">
		<link href="css/header.css" rel="stylesheet">
    <link href="css/icon-menu.css" rel="stylesheet">

		<!-- SWITCHER -->
		<link rel="stylesheet" id="switcher-css" type="text/css" href="plugins/switcher/css/switcher.css" media="all" />
		<link rel="alternate stylesheet" type="text/css" href="plugins/switcher/css/color1.css" title="color1" media="all" />
		<link rel="alternate stylesheet" type="text/css" href="plugins/switcher/css/color2.css" title="color2" media="all" />
		<link rel="alternate stylesheet" type="text/css" href="plugins/switcher/css/color3.css" title="color3" media="all" />
		<link rel="alternate stylesheet" type="text/css" href="plugins/switcher/css/color4.css" title="color4" media="all" />
		<link rel="alternate stylesheet" type="text/css" href="plugins/switcher/css/color5.css" title="color5" media="all" />

		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body class="animated-css" data-scrolling-animations="false">
		<div class="sp-body">

      <!-- Loader Landing Page -->
       <div id="loader">
        <div class="loader"></div>  
      </div>
      <!-- Loader end -->

			<!-- Start Switcher -->
			<div class="switcher-wrapper">	
				<div class="demo_changer">
					<div class="demo-icon customBgColor"><i class="fa fa-cog fa-spin fa-2x"></i></div>
					<div class="form_holder">
						<div class="row">
							<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
								<div class="predefined_styles">
									<div class="skin-theme-switcher">
										<h4>Color</h4>
										<a href="#" data-switchcolor="color1" class="styleswitch" style="background-color:#e94d38;"> </a>
                    <a href="#" data-switchcolor="color2" class="styleswitch" style="background-color:#0078ff;"> </a>
                    <a href="#" data-switchcolor="color3" class="styleswitch" style="background-color:#00ac00;"> </a>             
                    <a href="#" data-switchcolor="color4" class="styleswitch" style="background-color:#e8c500;"> </a>
                    <a href="#" data-switchcolor="color5" class="styleswitch" style="background-color:#c23eff;"> </a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- End Switcher -->

			<header id="header">
        <div class="header-top">
          <div class="container">
            <ul class="nav nav-pills nav-top navbar-right">
              <li class="dropdown langs">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#"><img src="images/united-kingdom.jpg" alt="uk"> <i class="fa fa-angle-down"></i></a>
                <ul role="menu" class="dropdown-menu">
                  <li><a href="#"><img src="images/united-kingdom.jpg" alt="uk"></a></li>
                  <li><a href="#"><img src="images/united-kingdom.jpg" alt="uk"></a></li>
                  <li><a href="#"><img src="images/united-kingdom.jpg" alt="uk"></a></li>
                </ul>
              </li>
              <li class="dropdown currency">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-usd"></i> <i class="fa fa-angle-down"></i></a>
                <ul role="menu" class="dropdown-menu">
                  <li><a href="#"><i class="fa fa-eur"></i></a></li>
                </ul>
              </li>
              <li class="dropdown my-account">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">My Account <i class="fa fa-angle-down"></i></a>
                <ul role="menu" class="dropdown-menu">
                  <li><a href="#">My Dashboard</a></li>
                  <li><a href="#">Account Information</a></li>
                  <li><a href="#">Address Book</a></li>
                  <li><a href="#">My Orders</a></li>
                </ul>
              </li>
              <li class="dropdown my-cart">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-shopping-cart"></i></a>
                <ul role="menu" class="dropdown-menu header-cart_product_list">
                    <li class="added-items">
                      <div class="header-cart_product_list_item clearfix">
                        <a class="item-preview" href="product-details.html"><img src="images/cart-img-1.jpg" alt="Product"></a>
                        <h4><a class="font-additional font-weight-normal hover-focus-color cart-product-title" href="product-details.html">Stylish Wear</a></h4>
                        <span class="item-cat font-main font-weight-normal"><a class="hover-focus-color cart-product-category" href="#">Men</a></span>
                        <span class="item-price font-additional font-weight-normal customColor">37.15 USD</span>
                        <a class="item-del hover-focus-color" href="#"><i class="fa fa-trash-o"></i></a>
                      </div>
                    </li>
                    <li class="added-items">
                      <div class="header-cart_product_list_item clearfix">
                        <a class="item-preview" href="product-details.html"><img src="images/cart-img-2.jpg" alt="Product"></a>
                        <h4><a class="font-additional font-weight-normal hover-focus-color cart-product-title" href="product-details.html">Bag</a></h4>
                        <span class="item-cat font-main font-weight-normal"><a class="hover-focus-color cart-product-category" href="#">Accessories</a></span>
                        <span class="item-price font-additional font-weight-normal customColor">60.10 USD</span>
                        <a class="item-del hover-focus-color" href="#"><i class="fa fa-trash-o"></i></a>
                      </div>
                    </li>
                  </ul>
              </li>
            </ul>
          </div>
          <div class="container-fluid trigger-container">
            <div class="row text-center">
              <button class="menu-trigger"><i class="fa fa-bars"></i></button>
            </div>
          </div>
        </div>
        <div class="header-middle">
          <div class="container relative">
            <a href="index.html" class="logo pull-left"></a>
            <div class="header-search pull-right">
              <div class="header-search_filter">
                <select class="formDropdown font-additional font-weight-normal" name="filterby" id="filterby">
                  <option value="0">Filter By</option>
                  <option value="date">Date</option>
                  <option value="title">Title</option>
                  <option value="cat">Category</option>
                </select>
                <i class="fa fa-angle-down customColor"></i>
              </div>
              <div class="header-search_form">
                <form class="product-search form-inline" action="#" method="POST">
                  <div class="form-group">
                    <label class="sr-only" for="searchQuery">Product Name ...</label>
                    <input type="search" class="product-search_field font-main font-weight-normal" id="searchQuery" placeholder="Product Name ...">
                  </div>
                  <button type="submit" class="product-search_btn hvr-bounce-to-right">
                    <i class="fa fa-search"></i>
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </header>

      <!-- icon-menu -->
      <nav id="icon-menu" class="main-menu">
        
        <div class="scrollbar" id="style-1">
         <ul>
            <li class="lightli">                                   
              <a href="index.html">
                <i class="fa fa-home fa-lg"></i>
                <span class="nav-text">Home</span>
              </a>
            </li>
            <li class="lightli">                                 
              <a href="#">
                <i class="fa fa-user fa-lg"></i>
                <span class="nav-text">My Account</span>
              </a>
            </li>
            <li class="lightli">                                 
              <a href="contact.html">
                <i class="fa fa-envelope-o fa-lg"></i>
                <span class="nav-text">Contact</span>
              </a>
            </li>
            
              <li class="darkerli">
                <a href="category.html">
                  <i class="fa fa-shopping-cart"></i>
                   <span class="nav-text">Shop</span>
                </a>
              </li>
              <li class="darkerli">
                <a href="category.html">
                  <i class="fa fa-male fa-lg"></i>
                  <span class="nav-text">Men</span>
                </a>
              </li>
              <li class="darkerli">
                <a href="category-1.html">
                  <i class="fa fa-female fa-lg"></i>
                  <span class="nav-text">Women</span>
                </a>
              </li>
              <li class="darkerli">
                <a href="category.html">
                  <i class="fa fa-picture-o fa-user-secret"></i>
                  <span class="nav-text">shoes</span>
                </a>
              </li>
              <li class="darkerli">
                <a href="product-details.html">
                  <i class="fa fa-picture-o fa-newspaper-o"></i>
                  <span class="nav-text">Detail</span>
                </a>
              </li>
              <li class="darkerli">
                <a href="product-details-1.html">
                  <i class="fa fa-picture-o fa-building"></i>
                  <span class="nav-text">Detail-1</span>
                </a>
              </li>
              <li class="darkerli">
                <a href="blog.html">
                  <i class="fa fa-pencil-square-o fa-lg"></i>
                  <span class="nav-text">Blog</span>
                </a>
              </li>
                                 
          </ul>
        </div>

      </nav>
          <!-- icon-menu -->

			<section id="pageTitleBox" class="paralax breadcrumb-container"  style="background-image: url('images/contact-heading-bg.jpg');">
				<!-- <div class="overlay"></div> -->
				<div class="container relative">
					<h1 class="title font-additional font-weight-normal color-main text-uppercase wow zoomIn" data-wow-delay="0.3s">CONTACT US</h1>
					<ul class="breadcrumb-list wow zoomIn" data-wow-delay="0.3s">
						<li>
							<a href="index-1.html" class="font-additional font-weight-normal color-main text-uppercase">HOME</a>
							<span><i class="fa fa-angle-double-right"></i></span>
						</li>
						<li>
							<a href="category.html" class="font-additional font-weight-normal color-main text-uppercase">CONTACT</a>							
						</li>						
					</ul>
				</div>
			</section>

      <!-- Map -->
      <div class="container-fluid map-container margin-top">
          <div class="row map wow fadeIn" data-wow-delay="1s" data-wow-duration="2s" data-wow-offset="200">
               <div id="map-canvas">
                 <h1 class="sr-only">Map</h1>
               </div>
          </div>
      </div>
          <!-- Map -->
			
      <section id="contact-us">
        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <div class="col-sm-12 address-info">
                <h3 class="font-additional font-weight-bold text-uppercase">Contact</h3>
                <div class="row">
                  <div class="col-sm-1 info-icon">
                    <p>
                      <i class="fa fa-map-marker"></i>
                    </p>
                  </div>
                  <div class="col-sm-9 info-text address-text">
                    <p>
                      icart ABC Road 14 Street XYZ Country
                    </p>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-1 info-icon">
                    <p>
                      <i class="fa fa-phone"></i>
                    </p>
                  </div>
                  <div class="col-sm-9 info-text">
                    <p>
                      (800) 9235 3658 32
                    </p>
                    <p>
                      (800) 9256 1236 00
                    </p>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-1 info-icon">
                    <p>
                      <i class="fa fa-envelope"></i>
                    </p>
                  </div>
                  <div class="col-sm-9 info-text">
                    <p>
                      <a href="#">info@domain.com </a>
                    </p>
                    <p>
                      <a href="#">personal@mail.com </a>
                    </p>
                  </div>
                </div>                
              </div>
              <div id="social-contact" class="col-sm-12">
                <h3 class="font-additional font-weight-bold text-uppercase">Follow us</h3>
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-linkedin"></i></a>
                <a href="#"><i class="fa fa-google-plus"></i></a>                  
              </div>  
            </div>
            <div class="col-sm-8">
              <div class="contact-form">
                <h3 class="font-additional font-weight-bold text-uppercase">Message</h3>
                <form id="contactForm" class="message-form form-inline">
                  <div class="form-group half-wigth pull-left">
                    <label class="sr-only" for="user-name">NAME</label>
                    <input type="text" class="message-field font-additional font-weight-normal color-third text-uppercase" id="user-name" placeholder="NAME" required>
                  </div>
                  <div class="form-group half-wigth pull-right">
                    <label class="sr-only" for="user-email">EMAIL</label>
                    <input type="email" class="message-field font-additional font-weight-normal color-third text-uppercase" id="user-email" placeholder="EMAIL" required>
                  </div>
                  <div class="form-group full-width pull-left">
                    <label class="sr-only" for="user-message">Message</label>
                    <textarea class="message-field font-additional font-weight-normal color-third text-uppercase" id="user-message" placeholder="Message" required></textarea>
                  </div>
                  <button type="submit" class="btn send-button font-additional font-weight-normal btn-block hvr-bounce-to-right hover-focus-border before-bg">Send Message</button>
                </form>
              </div>  
            </div>
          </div>
        </div>
      </section>

			<section id="brands">
        <div class="container">
          <div class="row">
            <ul class="brands-list">
              <li>
                <a href="#" class="brand-item">
                  <img src="images/brand-img-1.jpg" alt="Brand">
                </a>
              </li>
              <li>
                <a href="#" class="brand-item">
                  <img src="images/brand-img-2.jpg" alt="Brand">
                </a>
              </li>
              <li>
                <a href="#" class="brand-item">
                  <img src="images/brand-img-3.jpg" alt="Brand">
                </a>
              </li>
              <li>
                <a href="#" class="brand-item">
                  <img src="images/brand-img-4.jpg" alt="Brand">
                </a>
              </li>
              <li>
                <a href="#" class="brand-item">
                  <img src="images/brand-img-5.jpg" alt="Brand">
                </a>
              </li>
              <li>
                <a href="#" class="brand-item">
                  <img src="images/brand-img-6.jpg" alt="Brand">
                </a>
              </li>
            </ul>
          </div>
        </div>
      </section>
<footer id="footer">
        <a class="goToTop font-additional color-main text-uppercase" href="#" id="scrollTop">
          <i class="fa fa-angle-up"></i>
          <span>Top</span>
        </a>
        <div class="footer-top">
          <div class="container">
            <div class="row">
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 clearfix wow fadeIn" data-wow-delay="0.3s" data-wow-duration="2s">
                <a href="index.html" class="footer-top_logo"></a>
                <div class="footer-top_container clearfix">
                  <span class="font-main font-weight-normal color-additional">Proin est Pellentesque risus magna vulput vitae sodales uam morbi non sem lacus por mollis. Nunc condime ntum metus eud Ino lestie. Sed consectetuer. Lorem ipsum dolor amet ectetur adipisicing elit sed doincl.</span>
                  <ul class="footer-social-list">
                    <li><a href="#"><span class="social_facebook" aria-hidden="true"></span></a></li>
                    <li><a href="#"><span class="social_twitter" aria-hidden="true"></span></a></li>
                    <li><a href="#"><span class="social_googleplus" aria-hidden="true"></span></a></li>
                    <li><a href="#"><span class="social_pinterest" aria-hidden="true"></span></a></li>
                    <li><a href="#"><span class="social_youtube" aria-hidden="true"></span></a></li>
                    <li><a href="#"><span class="social_instagram" aria-hidden="true"></span></a></li>
                  </ul>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 clearfix wow fadeIn" data-wow-delay="0.6s" data-wow-duration="2s">
                <h4><span class="footer-top_title color-main font-additional font-weight-bold text-uppercase">QUICK LINKS</span></h4>
                <div class="footer-top_container clearfix">
                  <ul class="footer-nav">
                    <li><a href="#" class="font-main font-weight-normal color-additional"><i class="fa fa-caret-right customColor"></i> My Account</a></li>
                    <li><a href="#" class="font-main font-weight-normal color-additional"><i class="fa fa-caret-right customColor"></i> My Wishlist</a></li>
                    <li><a href="#" class="font-main font-weight-normal color-additional"><i class="fa fa-caret-right customColor"></i> Order Tracking</a></li>
                    <li><a href="#" class="font-main font-weight-normal color-additional"><i class="fa fa-caret-right customColor"></i> Order History</a></li>          
                    <li><a href="#" class="font-main font-weight-normal color-additional"><i class="fa fa-caret-right customColor"></i> Shipping Information</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 clearfix wow fadeIn" data-wow-delay="0.9s" data-wow-duration="2s">
                <h4><span class="footer-top_title color-main font-additional font-weight-bold text-uppercase">INFORMATION</span></h4>
                <div class="footer-top_container clearfix">
                  <ul class="footer-nav">
                    <li><a href="#" class="font-main font-weight-normal color-additional"><i class="fa fa-caret-right customColor"></i> About us</a></li>
                    <li><a href="#" class="font-main font-weight-normal color-additional"><i class="fa fa-caret-right customColor"></i> Contact us</a></li>             
                    <li><a href="#" class="font-main font-weight-normal color-additional"><i class="fa fa-caret-right customColor"></i> Privacy Policy</a></li>
                    <li><a href="#" class="font-main font-weight-normal color-additional"><i class="fa fa-caret-right customColor"></i> Terms &amp; Conditions</a></li>
                    <li><a href="#" class="font-main font-weight-normal color-additional"><i class="fa fa-caret-right customColor"></i> Return Policy</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 clearfix wow fadeIn" data-wow-delay="1.2s" data-wow-duration="2s">
                <h4><span class="footer-top_title color-main font-additional font-weight-bold text-uppercase">GET IN TOUCH</span></h4>
                <div class="footer-top_container clearfix">
                  <ul class="footer-contact">
                    <li class="font-main font-weight-normal color-additional">
                      <span class="icon_pin" aria-hidden="true"></span>
                      Woocom ABC Road 14 Street <br>XYZ Country
                    </li>
                    <li class="font-main font-weight-normal color-additional oneLine">
                      <span class="icon_phone" aria-hidden="true"></span>
                       (800) 9235 3658 32
                    </li>
                    <li class="font-main font-weight-normal color-additional oneLine">
                      <span class="icon_mail" aria-hidden="true"></span>
                      info@mail.com
                    </li>
                    <li class="font-main font-weight-normal color-additional">
                      <span class="icon_clock" aria-hidden="true"></span>
                      Mon to Sat : 08:30 AM - 09:30 PM <br>Sun : 10:00 PM - 4:00 PM
                    </li>                   
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <div class="container">
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 clearfix">
                <span class="footer_copyright font-main" style="color:#fff;">Created by <span class="font-main font-weight-semibold">ewebcraft</span> &copy; 2015 All rights reserved.</span>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 clearfix">
                <ul class="footer-payments pull-right">
                  <li><img src="images/C-1.jpg" alt="Payments"></li>
                  <li><img src="images/C-2.jpg" alt="Payments"></li>
                  <li><img src="images/C-3.jpg" alt="Payments"></li>
                  <li><img src="images/C-4.jpg" alt="Payments"></li>                  
                </ul>
              </div>
            </div>
          </div>
        </div>
      </footer>
		</div>

    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
		<script src="js/modernizr.custom.js"></script>
		<script src="js/jquery.placeholder.min.js"></script>
		<script src="js/smoothscroll.min.js"></script>
		<script src="js/classie.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
		
	  <script src="plugins/owl-carousel/owl.carousel.min.js"></script>
	    
	  <script src="plugins/bxslider/jquery.bxslider.min.js"></script>
		
		<script src="plugins/switcher/js/bootstrap-select.js"></script> 
		<script src="plugins/switcher/js/evol.colorpicker.min.js" type="text/javascript"></script> 
		<script src="plugins/switcher/js/dmss.js"></script>
	  
	  <script type="text/javascript" src="plugins/isotope/jquery.isotope.min.js"></script> 

		<script src="js/wow.min.js"></script>
		<script src="js/cssua.min.js"></script>
    <script src="js/theme.js"></script> 
    <script>
      
      /* Map */

      function initialize() {
            var mapCanvas = document.getElementById('map-canvas');
            var mapOptions = {
              center: new google.maps.LatLng(44.5403, -78.5463),
              zoom: 8,
              scrollwheel: false,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(mapCanvas, mapOptions);
        }
         google.maps.event.addDomListener(window, 'load', initialize);

       /* Map */
       
    </script>
	</body>
</html>